<template>
	<div class="realTime" :style="{ height: `calc(100vh - ${setMainHeight})` }">
		<el-card class="box-card" :style="{ height: `calc(100vh - ${setMainHeight} - 10px)` }" style="overflow: auto">
			<!-- 左侧树形结构 -->
			<!-- <div class="leftTree">
				<el-tree :data="treeData" node-key="id" :default-expand-all="true" :props="defaultProps"> </el-tree>
			</div> -->

			<!-- 右侧摄像头图片 -->
			<!-- class="pic" -->
			<!-- style="display: ruby" -->
			<div class="innerbox" >
				<div v-for="item in videoList" :key="item.id" style="width: 33.3%; height: 33.3%">
					<video :id="item.id" controls autoplay muted width="100%" height="100%" style="object-fit: fill"></video>
				</div>
			</div>
		</el-card>
	</div>
</template>
<script>
export default {
	name: 'realTime',
	components: {},
	data() {
		return {
			videoList: [
				{
					id: 'video0',
				},
				{
					id: 'video1',
				},
				{
					id: 'video2',
				},
				// {
				// 	id: 'video3',
				// },
				// {
				// 	id: 'video4',
				// },
				// {
				// 	id: 'video5',
				// },
				// {
				// 	id: 'video6',
				// },
				// {
				// 	id: 'video7',
				// },
				// {
				// 	id: 'video8',
				// },
			],
			webRtcServerList: [],
			camera_ip: '127.0.0.1:8000', //这里看自己的需要，也可以传入另一台电脑的ip，前提是都得在在一个局域网内
		};
    },
    computed: {
		// 设置主盒子高度
		setMainHeight() {
			let { isTagsview } = this.$store.state.themeConfig.themeConfig;
			if (isTagsview) return `114px`;
			else return `80px`;
		},
	},
	mounted() {
		this.$nextTick(() => {
			//video：需要绑定的video控件ID
			//127.0.0.1:8000：启动webrtc-streamer的设备IP和端口，默认8000
			this.videoList.forEach((item) => {
				let webRtcServer = new WebRtcStreamer(item.id, location.protocol + '//' + this.camera_ip);
				//需要查看的rtsp地址,根据自己的摄像头传入对应的rtsp地址即可。注意：视频编码格式必须是H264的，否则无法正常显示，编码格式可在摄像头的后台更改
				webRtcServer.connect('rtsp://admin:toec,357@192.168.1.66//Streaming/Channels/1');
				this.webRtcServerList.push(webRtcServer);
			});
		});
	},
	//销毁视频流
	beforeDestroy() {
		let length = this.webRtcServerList.length;
		for (let i = 0; i < length; i++) {
			let webRtcServer = this.webRtcServerList.pop();
			webRtcServer.disconnect();
			webRtcServer = null;
		}
	},
};
</script>

<style scoped lang="scss">
.realTime {
	::v-deep .el-card__body {
		width: 100%;
		// height: 100%;
		// display: flex;

		.leftTree {
			flex: 1;
			margin-right: 20px;
		}
		.innerbox {
			// flex: 9;
			display: flex;
			flex-wrap: wrap;
			.pic {
				width: 33.3%;
				height: 26vh;
				img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
}
</style>
